/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='back-img' @click="back">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>评价详情</text>
		</view>
		
		<view class="pj-body">
			<view class="mask" v-if="showMask" @touchstart='closePl' @touchmove="closePl()" @click='closePl'></view>
				<view class="item-head">
					<image class="head-icon" src="/static/banner.png" mode=""></image>
					<view class="head-right">
						<text class="username">{{replyData.username}}</text>
						<text class="time" >{{replyData.time}}</text>
						<text class="time">浏览2123次</text>
					</view>
				</view>
				<text class="pinglun" >{{replyData.pinglun}}</text>
				<view class="photo-list">
					<image :src='img' mode="widthFix" v-for="(img,indexImg) in replyData.photo" :key='indexImg'></image>
				</view>
				<view class="coll-item" >
					<image class="coll-item-img" src="/static/banner.png" mode=""></image>
					<view class="item-right">
						<text class="item-title">发箍达菲熊雪莉玫史黛拉兔耳朵游玩可爱头饰</text>
						<text class="item-coll-num">12323人收藏</text>
						<text class="item-price">￥<text style="font-size: 34upx;">57.9</text></text>
						<view class="findlike" >1580人付款</view>
					</view>
				</view>
				<view class="reply">
					<view class="reply-title">
						<text>全部评论（1）</text>
					</view>
					<view class="reply-list">
						<view class="reply-item">
							<view class="reply-item-head">
								<image class="reply-icon" src="/static/banner.png" mode=""></image>
								<text>{{replyData.pl[0].username}}</text>
								<image class="reply-zan" src="/static/zan.png" mode=""></image>
							</view>
							<text class="reply-des">{{replyData.pl[0].reply}}</text>
						</view>
					</view>
				</view>
		</view>
		<view class="bottom">
			<view class="bottom-btn" @click="openPl">
				<image src="/static/pl.png" mode=""></image>
				<text>评论</text>
			</view>
			<view class="bottom-line"></view>
			<view class="bottom-btn">
				<image src="/static/zan.png" mode=""></image>
				<text>点赞</text>
			</view>
		</view>
		<view class="pl-box" v-if="showPl" >
			<input type="text" @blur='closePl' placeholder="说点什么吧……" ref='pl' id='inputId' value="" />
			<view class="pl-box-btn" @click="closePl">发送</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				showPl:false,
				showPLbox:false,
				showMask:false,
				replyData:
					{
						username:'可达鸭',
						pinglun:'反观中国航天则历来倡导合作共赢，无论是探测月球、建设空间站、还是未来惠及“一带一路”沿线的空间信息网络，都敞开怀抱欢迎八方来客。',
						time:'2010-12-21',
						headicon:'../../../static/banner.png',
						photo:[
							'../../../static/banner.png','../../../static/banner.png','../../../static/banner.png',
							'../../../static/banner.png'
						],
						zan:32,
						plnum:4,
						look:234,
						pl:[
							{
								username:'乔治',
								username2:'千恩',
								reply:'款式简约大方，做工精细，价格也太实惠了，买到就是赚到了很第三方。',
							},
							{
								username:'乔治',
								username2:'千恩',
								reply:'贝加尔湖中国古称北海，曾为中国北方部族主要活动地区。',
							}
						],
						comments:[
								{
									name:'千恩',
									comment:'世界那么大，我想去看看'
								}
						],
						moreNumb:9
					},
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			openPl(){
				this.showPl = true
				this.showMask = true
			},
			closePl(){
				this.showPl = false
				this.showMask = false
			}
		},
		
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		min-height: 40upx;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;
	}
	.back-img{
		width: 50upx;
		height: 50upx;
		float: left;
		text-align: center;
		vertical-align: middle;
	}
	.back-img image{
		width: 24px;
		height: 24px;
		margin-left: 20upx;
	}
	.head text{
		line-height: 50upx;
		margin-top: 50upx;
		margin-left: 50upx;
		font-size: 32upx;
	}
	.mask{
		width: 750upx;
		
		position: absolute;
		z-index: 29;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
	}
	.pj-body{
		width: 750upx;
		overflow: scroll;
		height: calc(100vh - 96px);
	}
	.item-head{
		width: 720upx;
		height: 80upx;
		margin-top: 40upx;
		margin-left: 30upx;
	}
	.head-icon{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		float: left;
		margin-right:14upx;
	}
	.head-right{
		float: left;
		width: 600upx;
		height: 80upx;
	}
	.username{
		font-size: 34upx;
		display: block;
		line-height: 20upx;
		margin-left: 20upx;
	}
	.time{
		font-size: 28upx;
		height: 40upx;
		line-height: 40upx;
		float: left;
		display: block;
		margin-top: 30upx;
		margin-left: 20upx;
		color: #888888;
		margin-right: 20upx;
	}
	.pinglun{
		width: 540upx;
		text-align:justify;
		display: block;
		font-size: 28upx;
		line-height: 40upx;
		margin-top: 30upx;
		margin-left: 144upx;
	}
	.photo-list{
		width: 100%;
		height: auto;
	}
	.photo-list image{
		width: 696upx;
		height: 696upx;
		margin-left: 27upx;
		margin-right: 27upx;
		margin-top: 35upx;
	}
	.coll-item{
		width: 688upx;
		height: 206upx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 20upx;
		margin-bottom: 24upx;
		background: #FFFFFF;
		margin-top: 40upx;
		/* box-shadow: 1px 1px 9px 0px #000000; */
		box-shadow: 0px 0px 20px 0px rgba(232,232,232,1);
	}
	.coll-item-img{
		width: 220upx;
		height: 206upx;
		border-radius: 20upx 0 0 20upx;
		float: left;
	}
	.item-right{
		width: 460upx;
		height: 206upx;
		float: right;
	}
	.item-right-2{
		width: 400upx;
		height: 206upx;
		float: right;
	}
	.item-title{
		width: 90%;
		margin: 20upx 5%;
		display: block;
		height: auto;
		font-size: 26upx;
	}
	.item-coll-num{
		width: 90%;
		margin: 20upx 5%;
		display: block;
		height: auto;
		font-size: 24upx;
		color: #999999;
	}
	.item-price{
		font-size: 26upx;
		color: #55A0FF;
		margin-top: -10upx;
		float: left;
		margin-left: 20upx;
	}
	.findlike{
		width: 150upx;
		height: 45upx;
		border-radius: 30upx;
		text-align: center;
		line-height: 45upx;
		float: right;
		margin-top: -10upx;
		font-size: 24upx;
		margin-right: 20upx;
		color: #C2C0C0;
	}
	.reply{
		width: 100%;
		height: auto;
		background: #FFFFFF;
	}
	.reply-title{
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		border-bottom: rgba(238,238,238,1.00) solid 1upx;
	}
	.reply-title text{
		font-size: 30upx;
		margin-left: 18upx;
		line-height: 80upx;
	}
	.reply-item{
		width: 100%;
		height:auto;
		margin-bottom: 40upx;
	}
	.reply-item-head{
		width: 100%;
		height: 46upx;
		margin-top: 40upx;
	}
	.reply-icon{
		width: 46upx;
		height: 46upx;
		float: left;
		margin-left: 36upx;
		border-radius: 50%;
	}
	.reply-item-head text{
		line-height: 46upx;
		margin-left: 10upx;
		font-size: 24upx;
		color: rgba(153,153,153,1.00);
		float: left;
	}
	.reply-zan{
		width: 29upx;
		height: 25upx;
		float: right;
		margin-right: 48upx;
		margin-top: 10upx;
	}
	.reply-des{
		width: 620upx;
		text-align:justify;
		display: block;
		font-size: 26upx;
		line-height: 46upx;
		margin-top: 30upx;
		margin-left: 88upx;
		color: rgba(51,51,51,1.00);
	}
	
	
	.bottom{
		width: 750upx;
		height: 96upx;
		bottom: 0;
		position: fixed;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-shadow: -0.698px -9.976px 19px 0px rgba(173,173,174,0.24);
	}
	.bottom-btn{
		width: 374upx;
		height: 96upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.bottom-btn image{
		width: 29upx;
		height: 26upx;
		margin: 35upx 10upx 0 10upx;
	}
	.bottom-btn text{
		line-height: 96upx;
		font-size: 24upx;
		color: #FFFFFF;
		color: rgba(102,102,102,1.00);
	}
	.bottom-line{
		width: 2upx;
		height: 96upx;
		background: rgba(217,217,217,1.00);
	}
	
	.pl-box{
		width: 750upx;
		height: 120upx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		position: fixed;
		justify-content: space-between;
		bottom: 0;
		z-index: 30;
	}
	.pl-box input{
		width: 500upx;
		height: 80upx;
		margin-top: 20upx;
		font-size: 30upx;
		margin-left: 30upx;
		border-radius: 10upx;
		padding:0 20upx;
		border: solid 1upx;
		border-color: rgba(153,153,153,1.00);
	}
	.pl-box-btn{
		height: 80upx;
		background: rgb(24,179,235) ;
		width: 130upx;
		margin-top: 20upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 30upx;
		line-height: 80upx;
		color: #FFFFFF;
		margin-right: 30upx;
	}
</style>
